<template>
  <div>
    <div class="setClassify">
      <div class="setClassify__del" @click="delGoods">批量删除</div>
      <el-dropdown @command="handleCommand" trigger="click">
        <div class="setClassify__drop">...</div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in dropdownCoupList"
            :key="item.command"
            :disabled="item.disabled"
            :command="item.command"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- <div class="setClassify" v-else>
      <div class="setClassify__del">设置投放区域</div>
      <el-dropdown @command="handleCommand" trigger="click">
        <div class="setClassify__drop">...</div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in dropdownShopList"
            :key="item.command"
            :disabled="item.disabled"
            :command="item.command"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class DrapDowm extends Vue {
  get name() {
    return this.$parent.name;
  }

  names = this.name;

  /**
   * 下拉优惠券菜单列表
   */
  dropdownCoupList = [
    {
      text: "批量上架",
      command: "1",
      disabled: false,
    },
    {
      text: "批量下架",
      command: "2",
      disabled: false,
    },
  ];

  /**
   * 下拉商品列表
   */
  dropdownShopList = [
    {
      text: "批量上架",
      command: "1",
      disabled: false,
    },
    {
      text: "批量下架",
      command: "2",
      disabled: false,
    },
    {
      text: "删除",
      command: "3",
      disabled: false,
    },
  ];

  /**
   * 点击的下拉项
   */
  handleCommand(val) {
    this.$emit("command", val);
  }

  /**
   * 点击批量删除
   */
  delGoods() {
    this.$emit("delGoods");
  }
}
</script>

<style lang="scss" scoped>
@include b(setClassify) {
  display: flex;
  @include e(del) {
    width: 80px;
    height: 30px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer;
  }
  @include e(drop) {
    width: 40px;
    height: 30px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
  }
}
</style>
